<!-- 设备详情2.0 -->
<template>
  <div class="device animate__animated animate__zoomIn">
    <div class="top">
      <div class="top-a">
        <dv-decoration-11 style="width: 25%; height: 80%; font-size: 0.26rem"
          >设备概况</dv-decoration-11
        >
        <!-- 返回 -->
        <div class="go-back">
          <GoBack></GoBack>
        </div>
      </div>
      <div class="top-b">
        <!-- 地区下拉 -->
        <el-dropdown trigger="click" @command="handleArea">
          <span class="el-dropdown-link">
            {{
              this.$store.getters.getAreaList[$store.getters.getListAreaIndex]
                .area_name || "连云港市"
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, i) in this.$store.getters.getAreaList"
              :key="i"
              :command="[item.area_code, i]"
              >{{ item.area_name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <div
          class="box1"
          v-if="$store.getters.getListCategory != 'postGetComInfoList'"
        ></div>
        <!-- 类型下拉 -->
        <el-dropdown trigger="click" @command="handleType" v-if="false">
          <span class="el-dropdown-link">
            {{
              $store.getters.getListPageType.length > 0
                ? $store.getters.getListPageType[
                    $store.getters.getListTypeIndex
                  ][nameStr[$store.getters.getListCategory]]
                : "全部"
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, i) in $store.getters.getListPageType"
              :key="i"
              :command="{
                index: i,
                str: item[nameStr[$store.getters.getListCategory]],
              }"
              >{{
                item[nameStr[$store.getters.getListCategory]]
              }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- main -->
    <div class="main">
      <!-- left -->
      <div v-if="!loadingFlag" class="box left">
        <!-- 左上 -->
        <div class="box-container">
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <PublicEcharts
              :option="this.deviceData1"
              :title="'设备使用前五单位统计'"
              :id="'deviceData1'"
              ref="deviceData1"
            ></PublicEcharts>
          </dv-border-box-12>
        </div>
        <!-- 左下 -->
        <div class="box-container">
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <PublicEcharts
              :option="this.deviceData2"
              :title="'设备状态'"
              :id="'deviceData2'"
              ref="deviceData2"
            ></PublicEcharts>
          </dv-border-box-12>
        </div>
      </div>
      <!-- right -->
      <div v-if="!loadingFlag" class="box right">
        <!-- 右上 -->
        <div class="box-container">
          <!--  -->
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <PublicEcharts
              :option="this.deviceData3"
              :title="'设备年度数量趋势'"
              :id="'deviceData3'"
              ref="deviceData3"
            ></PublicEcharts>
          </dv-border-box-12>
        </div>
        <!-- 右下 -->
        <div class="box-container">
          <!--  -->
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <PublicEcharts
              :option="this.deviceData4"
              :title="'设备使用年限统计'"
              :id="'deviceData4'"
              ref="deviceData4"
            ></PublicEcharts>
          </dv-border-box-12>
        </div>
      </div>
      <!-- loading -->
      <div v-if="loadingFlag" class="e-loading">
        <dv-loading style="color: #fff; opcity: 0.5">数据加载中...</dv-loading>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import PublicEcharts from "../components/charts/PublicEcharts";
// import deviceCountOption from "../utils/chartOption/deviceCountOption";
import {
  getDeviceRank,
  getDeviceStatus,
  getDeviceTrend,
  getDeviceYears,
} from "../utils/chartOption/deviceCountOption";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PublicEcharts },
  data() {
    //这里存放数据
    return {
      // 横向柱状图 1
      deviceData1: null,
      deviceData2: getDeviceStatus(),
      deviceData3: getDeviceTrend(),
      deviceData4: getDeviceYears(),
      loadingFlag: true,
      nameStr: {
        postGetUseDevList: "dev_name",
        postGetPersonInfoById: "person_name",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 地区下拉
    handleArea(e) {
      this.$store.commit("setListAreaIndex", parseInt(e[1]));
      // return console.log(e);
      let mapType = "lyg";
      switch (e[0]) {
        case 320700000000:
          this.$store.commit("setListAreaIndex", 0);
          mapType = "lyg";
          break;
        case 320703000000:
          this.$store.commit("setListAreaIndex", 1);
          mapType = "lyq";
          break;
        case 320706000000:
          this.$store.commit("setListAreaIndex", 2);
          mapType = "hzq";
          break;
        case 320707000000:
          this.$store.commit("setListAreaIndex", 3);
          mapType = "gyq";
          break;
        case 320722000000:
          this.$store.commit("setListAreaIndex", 4);
          mapType = "dhx";
          break;
        case 320723000000:
          this.$store.commit("setListAreaIndex", 5);
          mapType = "gyx";
          break;
        case 320724000000:
          this.$store.commit("setListAreaIndex", 6);
          mapType = "gnx";
          break;
        default:
          return console.log("我丢...");
      }
      this.$store.commit("setMapType", mapType);
      // this.lygjson = this.getLygJson()[this.$store.getters.getMapType];
      this.init();
    },
    handleType(command) {
      console.log(command);
      this.$store.commit("setListTypeIndex", command.index);
      this.init();
    },
    async init() {
      this.loadingFlag = true;

      // 获取列表数据
      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        // dev_code: this.$store.getters.getListPageType[
        //   this.$store.getters.getListTypeIndex
        // ].dev_code,
      };
      console.log("发送的参数");
      console.log(params);
      console.log("等待接口 postGetDevChar");

      let arr = await this.$http["postGetDevChar"](params);
      if (arr.data.errorCode != 0) {
        console.log(arr);
        return console.log("设备统计详情有错");
      }
      let data = arr.data.data;
      console.log(data);

      // 使用前五
      let arrs1 = { types: [], data: [] };
      data.comFive.forEach((ele) => {
        arrs1.types.push(ele.com_name);
        arrs1.data.push(ele.dev_total);
      });

      let arrs2 = { types: [], data: [] };
      data.devState.forEach((ele) => {
        arrs2.types.push(ele.dev_status);
        arrs2.data.push({
          value: ele.total,
          name: ele.dev_status,
        });
      });

      // 设备年度数量趋势
      let arrs3 = { types: [], data: [] };
      data.devYears.forEach((ele) => {
        arrs3.types.push(ele.year_num);
        arrs3.data.push(ele.total);
      });

      // 设备年度数量趋势
      let arrs4 = { types: [], data: [] };
      data.devUseYears.forEach((ele) => {
        arrs4.types.push(ele.use_year_area);
        arrs4.data.push(ele.total);
      });

      // -------------------------
      this.$nextTick(() => {
        //   this.chart6(ret.data);
        this.deviceData1 = getDeviceRank(arrs1);
        this.deviceData2 = getDeviceStatus(arrs2);
        this.deviceData3 = getDeviceTrend(arrs3);
        this.deviceData4 = getDeviceYears(arrs4);
        this.loadingFlag = false;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // return console.log(getDeviceRank());
    // if (JSON.stringify(this.$route.params) == "{}") {
    //   return console.log("刷新了");
    // }
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'>
//更改element ui样式

.el-dropdown-link {
  color: @FontColor;
  font-size: 0.24rem;
}
.el-dropdown-menu {
  background-color: rgba(0, 0, 0, 0.6);
}
.el-dropdown-menu__item {
  color: @FontColor;
  font-size: 0.24rem;
}
//更改element ui样式 end
.device {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 20%;
    position: relative;
    .top-a,
    .top-b {
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: @FontColor;
      .box1 {
        width: 5%;
      }
      .go-back {
        position: absolute;
        left: 0;
        top: 2%;
      }
    }
    .top-b {
      height: 40%;
      border-bottom: 1px dashed #4b7cba;
      border-top: 1px dashed #4b7cba;
      background-color: rgba(0, 0, 0, 0.1);
    }
    .goBack {
      position: absolute;
      left: 1%;
      top: 6%;
      font-size: 0.22rem;
      color: @FontColor;
    }
    .goBack:hover {
      color: @HoverColor;
    }
  }

  .main {
    width: 100%;
    height: 80%;
    // background-color: rgba(0, 0, 255, 0.2);
    display: flex;
    position: relative;
    .box {
      height: 100%;
      flex: 1;
    }
    .left,
    .right {
      display: flex;
      flex: 1;
      flex-direction: column;
      // padding: 0 1%;
      .box-container {
        width: 80%;
        flex: 1;
        padding: 4% 10%;
        overflow: hidden;
        cursor: pointer;
        position: relative;
      }
    }
  }
}
</style>